<template>
  <view class="bg">
    <view class="white__bg">
      <view class="shop__avatar">
        <u-upload ref="uUpload"
                  :action="action"
                  @on-success="upload"
                  :header="header"
                  :auto-upload="true"
                  :custom-btn="true"
                  :show-progress="false"
                  :show-tips="false"
                  :deletable="false"
                  max-count="1"
                  :multiple:="false">
          <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
            <u-avatar size="150" :src="form.pic"></u-avatar>
          </view>
        </u-upload>
        <text class="shop__type">{{form.name}}</text>

      </view>
      <view class="upload__data">
        <text @click="editStatus = !editStatus">{{editStatus?'取消修改':'修改信息'}}</text>

      </view>

      <view class="page">
        <view class="pageList">
          <view >
            <view class="pageList-name">商家信息</view>
            <u-input v-model="form.name" v-if="editStatus"/>

            <text class="pageList-txt" v-else>{{form.name}}</text>
          </view>
<!--          <u-icon name="arrow-right"></u-icon>-->
        </view>
        <view class="pageList">
          <view >
            <view class="pageList-name">负责人</view>

            <text class="pageList-txt">{{form.leader}}</text>

          </view>
<!--          <u-icon name="arrow-right"></u-icon>-->
        </view>
        <view class="pageList">
          <view >
            <view class="pageList-name">余额</view>
            <text class="pageList-txt">{{balance}}</text>
          </view>
<!--          <u-icon name="arrow-right"></u-icon>-->
        </view>
        <view class="pageList">
          <view >
            <view class="pageList-name">营业时间</view>
            <text :class="['pageList-txt',editStatus ? 'black' : '']" v-if="editStatus" @click="this.showPicker = true">{{form.businessTime}}</text>
            <text :class="['pageList-txt']" v-else>{{form.businessTime}}</text>

          </view>
<!--          <u-icon name="arrow-right"></u-icon>-->
        </view>
        <view class="pageList">
          <view >

            <view class="pageList-name">邮箱</view>
            <u-input v-model="form.email" v-if="editStatus"/>
            <text class="pageList-txt" v-else>{{form.email}}</text>
          </view>
<!--          <u-icon name="arrow-right"></u-icon>-->
        </view>
        <view class="pageList">
          <view >
            <view class="pageList-name">手机号码</view>
            <u-input v-model="form.phone" v-if="editStatus"/>
            <text class="pageList-txt" v-else>{{form.phone}}</text>
          </view>
<!--          <u-icon name="arrow-right"></u-icon>-->
        </view>
      </view>
    </view>

    <view class="save" @click="submit">保存</view>
<!--    <u-picker v-model="showPicker" mode="time" :params="params"></u-picker>-->
    <smh-time-range :show="showPicker" :time="['08','00','0','18','30']" @confrim="confrim" @cancel="cancel" @close="cancel"></smh-time-range>
    <u-toast ref="uToast" />

  </view>

</template>
<script>
import __config from '../../config/env';
import {shopInfo, shopEdit, videoCount} from "../../api/shop";

export default {
  components: {

  },
  data() {
    return {
      action:__config.action,
      form:{

      },
      //上传图片请求头
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        'Authorization': uni.getStorageSync('token')
      },
      //上传图片列表
      avatarList:[],
      //是否编辑
      editStatus:false,
      //是否展示时间选择器
      showPicker:false,
      //余额
      balance:"",

    }
  },
  onLoad(){
    this.getInfo();
    this.getBalance();
  },
  methods:{
    confrim(e){
      this.form.businessTime = e.time;
      this.showPicker = false;

    },
    cancel(e){
      this.showPicker = false
    },
    upload(data, index, lists, name){
      this.form.pic = data.data.url
      console.log(data);
    },
    getInfo(){
      shopInfo().then(res =>{
        this.form = res.data;
      })
    },
    //获取余额
    getBalance(){
      videoCount().then(res =>{
        this.balance = res.data
      })
    },
    submit(){
      this.showPicker = false;
      shopEdit(this.form).then(res =>{
        if (res.code == 200){
          this.$refs.uToast.show({
            title: '修改成功',
            type: 'success'
          })
          this.getInfo();
        }
        console.log(res);
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  .bg{
    width: 100vw;
    min-height: 100vh;
    background: #F5F5F5;

  }
  .white__bg{
    background: #ffffff;
    border-top: 1rpx solid #fff;

  }
  .shop__avatar{
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin: 30rpx 0;
    ::v-deep .u-list-item{
      border-radius: 50%;
    }
    .addBtn{
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
    }
  }
  .shop__type{
    color: #2E3C4D;

  }
  .upload__data{
    display: flex;
    width: 90%;
    margin: 0 auto;
    color: #2E3C4D;
    justify-content: flex-end;

    >text{
      display: block;
      background: #D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%);
      border-radius: 7rpx;
      padding: 10rpx 10rpx;
      color: #ffffff;
      font-size: 20rpx;
    }

  }
  .page{
    width: 90%;
    margin: 40rpx auto 0;
    .pageList:first-child{
      border-top: 1rpx solid #F3F3F7;

    }
    .pageList{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      border-bottom: 1rpx solid #F3F3F7;
      >view{
        display: flex;
        align-items: center;

        .pageList-name{
          width: 150rpx;
          font-size: 28rpx;
          color: #2E3C4D;
          margin-right: 100rpx;

        }
        .pageList-txt{
          font-size: 26rpx;
          color: #757575;
        }
      }

    }
  }
  .save{
    width: 100%;
    height: 100rpx;
    background: #ffffff;
    color: #5182F6;
    text-align: center;
    line-height: 100rpx;
    margin-top: 20rpx;

  }
  .black{
    color: #000!important;
    font-size: 28rpx!important;
  }
</style>
